當我們開始使用component之後會發現一些問題接踵而來，
最常見的就是component之間要如何溝通，相互傳值。

父傳子

將 外層/上層 的資料傳遞給 內層/下層 ，
我們可以透過props來達到我們的目的。

props

1. 我們先在 src > components 右鍵 新增檔案
2. 命名叫做 childComponent.vue
3. 在childComponent.vue 輸入下方程式碼:

template:

<template>
    <div>
        <button > {{title}} </button>
    </div>
</template>

我們在component裡面做一個button，
button上面顯示的字由{{title}}來控制

script:

<script>
export default {
    name:'childComponent',
    props:['title',]
}
</script>

在props裡面宣告一個變數(屬性)title，來接收外層傳進來的數值。
這樣就完成內層component的設計了。

接下來，我們看看在外層如何使用。

4. 在 App.vue 裡面修改下方程式碼:
   script:

<script>
import childComponent from './components/childComponent'
export default {
  name: 'App',
  components: {
    child:childComponent,
  },
  
  
}
</script>

引用(import)我們剛剛完成的childComponent(component)，
把她取個小明叫child

template:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <child title='I am Button Title'></child>
</template> 

我們留著Vue的logo(其實只是為了不會太單調)，
加入我們剛剛完成的元件，將title傳入。

5. 執行npm run serve
   

這樣就完成從外層傳值到內層了。

有小夥伴會問既然是標題，那能不能設定他只能傳文字(字串 String)

6. 那我們只需要稍微修改一下childComponent.vue裡面的props

script:

<script>
export default {
    name:'childComponent',
    props:{
        title:String, //規定只能傳字串型態
    },
}
</script>

這邊要提一下，雖然說你能規定他只能傳甚麼樣的型態，
但是這邊並不會有強制力。
會自動幫你轉型成最適合的型態
(小夥伴可以試著把它改成Boolean型態，然後按下F12看瀏覽器的console)

如果有開發經驗的小夥伴可能還會問，那我應該如何給予預設值?

7. 我們只需要再一次修改childComponent.vue裡面的props

script:

<script>
export default {
    name:'childComponent',
    props:{
        title:{
            type: String, //規定只能傳字串型態
            default: '這是預設字串' //可設定預設值
            }, 
    },
}
</script>

這樣就能夠有預設值了。

8. 接下來我們只需要刪除App.vue裡,<child>的title屬性就可以看到預設值了。
   template:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <child></child>
</template> 

結語

原本打算在本篇一次性說完剩下的 子傳父 、 雙向傳值。
不過，有小夥伴覺得一次的資訊量太大，所以將它分成三篇，一次一次講解。